<template>
  <div class="box">
    <!-- 标题 -->
    <div class="title">
      <h3>中外运-日新国际货运有限公司 </h3>
    </div>
    <!-- 主体内容区 -->
    <div class="main">
      <!-- tab切换-->
      <div class="nav">
        <ul class="nav-tab">
          <!--                onclick="changeTab(0)"-->
          <li class="nav-tab-li"  >新闻资讯</li>
          <li class="nav-tab-li" >娱乐头条</li>
          <li class="nav-tab-li" >阅读平台</li>
          <li class="nav-tab-li" >游戏资讯</li>
        </ul>
      </div>
      <!--内容部分-->
      <div class="container">
        <div class="part">
          <div class="part-left">
            <p class="part-p">北京盈科(成都)律师事务所(以下简称“盈科成都"")</p>
            <span class="part-date">2021年10月3日</span>
          </div>
          <div class="part-right">
            <img src="@/assets/images/first.png" alt="第一张图">
          </div>
        </div>
        <div class="part">
          <div class="part-left">
            <p class="part-p">极课大数据破解基层学校教</p>
            <span class="part-date">2021年10月2日</span>
          </div>
          <div class="part-right">
            <img src="@/assets/images/second.png" alt="第一张图">
          </div>
        </div>
        <div class="part">
          <div class="part-left">
            <p class="part-p">北京盈科(成都)律师事务所(以下简称“盈科成都"")</p>
            <span class="part-date">2021年10月1日</span>
          </div>
          <div class="part-right">
            <img src="@/assets/images/three.png" alt="第一张图">
          </div>
        </div>
        <div class="part">
          <div class="part-left">
            <p class="part-p">北京盈科(成都)律师事务所(以下简称“盈科成都"")</p>
            <span class="part-date">2021年9月4日</span>
          </div>
          <div class="part-right">
            <img src="@/assets/images/four.png" alt="第一张图">
          </div>
        </div>
        <div class="part">
          <div class="part-left">
            <p class="part-p">郑州市第四轮全员核酸检测全部结束 11名确诊患者达…</p>
            <span class="part-date">2021年9月2日</span>
          </div>
          <div class="part-right">
            <img src="@/assets/images/five.png" alt="第一张图">
          </div>
        </div>
        <div class="part">
          <div class="part-left">
            <p class="part-p">北京盈科(成都)律师事务所(以下简称“盈科成都"")</p>
            <span class="part-date">2021年10月3日</span>
          </div>
          <div class="part-right">
            <img src="@/assets/images/first.png" alt="第一张图">
          </div>
        </div>
        <div class="part">
          <div class="part-left">
            <p class="part-p">上海交通大学未来技术学院成立：聚焦能源、健康</p>
            <span class="part-date">2021年9月2日</span>
          </div>
          <div class="part-right">
            <img src="@/assets/images/six.png" alt="第一张图">
          </div>
        </div>
      </div>
    </div>
    <!--底部-->
    <div class="footer">
      <div class="news">
        <div>
          <img src="@/assets/images/article.png"></img>
        </div>
        <div>文章资讯</div>
      </div>
      <div class="person">
        <div>
          <img src="@/assets/images/personal.png" alt="">
        </div>
        <p>个人中心</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style lang="less" scoped>
.box {
  background-color: #f5f5f6;
  ///* height: 100%; */
  position: relative;
  //头部
  .title {
    display: flex;
    width: 100%;
    height: 44px;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    //background-color: #233981;
    h3 {
      width: 218px;
      height: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      padding-top:9px;
      padding-bottom: 11px;
      font-weight: 500;
      color: #333336;
      line-height: 24px;
      font-size: 16px;
    }
  }
  //主体部分
  .main {
    background-color: white;
    height: 100%;
    //tab切换
    .nav {
      padding-right: 3%;
      border-bottom: 0.1rem solid #f5f5f6;
      width: 354px;

      .nav-tab {
        width: 100%;
        line-height: 44px;
        padding: 0 16px;
        overflow: hidden;

        .nav-tab-li {
          display: inline-block;
          width: 64px;
          height: 24px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          //color: #233981;
          line-height: 24px;
          //  background: skyblue;
        }
      }
    }

    //内容部分
    .container {
      .part {
        display: flex;
        width: 100%;
        height: 96px;
        // background: chartreuse;
        padding-right: 16px;

        .part-left {
          margin: 16px;

          .part-p {
            width: 230px;
            height: 48px;
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333336;
            line-height: 24px;
            // background: rebeccapurple;
          }

          .part-date {
            display: block;
            width: 196px;
            height: 40px;
            font-size: 14px;
            text-align: left;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 40px;
            //background: #bfa;
          }
        }

        .part-right {
          margin-top: 16px;
          width: 94px;
          height: 72px;
          line-height: 72px;
          //background: #233981;
          img {
            //display: inline;
            height: 72px;
            line-height: 72px;
            //background: red;
          }
        }
      }
    }
  }
  //底部
  .footer{
    position: fixed;
    bottom: 0;
    background-color: white;
    width: 375px;
    height: 49px;
    display: flex;
    font-size: 16px;
    text-align: center;
    .news{
      flex: 1;
    }
    .person{
      flex: 1;
    }
    img{
      width: 20px;
      height: 20px;
      display: inline;
    }
  }
}
</style>
